<template>
    <div class="container">
        <div class="card">
            <div class="header">
                {{ data.weekday }}
            </div>
            <h1 class="text lunar">
                {{ data.lunar }}
            </h1>
            <h2 class="text date">
                {{ data.date }}
            </h2>
        </div>
    </div>
</template>

<script>
export default {
    // 接收父组件传递过来的data数据  并赋值给组件中的data数据  组件就可以使用data数据了  这里的data是组件中的data数据  不是vuex中的data数据  所以要使用props接收父组件传递过来的data数据
    props: {
        data: {
            type: Object,
            default: {}
        }
    },
}
</script>

<style lang="less" scoped>
    .container {
        padding: .15rem;
        box-sizing: border-box;
        .card {
            // 最小高度
            min-height:1.2rem;
            background: url('../../assets/img/bg.jpg') no-repeat center center;
            border: 1px solid #ddd;
            border-radius: .15rem;
            // 隐藏超出部分的内容
            overflow: hidden;
            color: #fff;
            .header {
                height: .35rem;
                padding: .15rem;
                box-sizing: border-box;
                font-size:.14rem;
                background: rgba(0,0,0,.3);
            }
            .text {
                text-align: center;
                margin: .3rem 0;
                text-shadow: .02rem.05rem.05rem #666;
            }
            .lunar {
                color: #f75555;
                font-size:.5rem;
                // 加粗
                font-weight: bold;
            }
            .date {
                font-size:.2rem;
            }
        }
    }
    
</style>